<template>
    <view>
        <u-popup :show="visible" mode="bottom" round="48rpx" @close="close">
			<view class="popup-push">
				<view class="popup-push-header">
					<view class="site"></view>
					<view class="site title">選擇發佈類型</view>
					<view class="site btn" @click="close">
						<u-image
							src="/static/images/icon/close.svg"
							width="60rpx"
							height="60rpx"
						></u-image>
					</view>
				</view>
				<view class="popup-push-body">
					<view class="popup-push-list">
						<view class="popup-push-item" v-for="(item,index) in list" :key="index" @click="pushFn(item.type)">
							<view class="popup-push-icon">
								<u-image
									:src="item.icon"
									width="48rpx"
									height="48rpx"
								></u-image>
							</view>
							<view class="popup-push-text">
								<view class="title">{{item.title}}</view>
								<view class="describe">{{item.describe}}</view>
							</view>
							<view class="popup-push-arrow">
								<u-image
									src="/static/images/icon/right-icon.png"
									width="48rpx"
									height="48rpx"
								></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
export default {
    props: {
       
    },
    data() {
        return {
            visible: false,
			list:[{
				icon:'/static/images/icon/expert_circle.png',
				title:'我有達人技能',
				describe:'展示你的專業，讓需要的人找到你！',
				type:'expert'
			},
			{
				icon:'/static/images/icon/task_circle.png',
				title:'我想找任務幫手',
				describe:'發佈需求，快速找到合適的專家！',
				type:'task'
			},
			{
				icon:'/static/images/icon/colony_circle.png',
				title:'我想分享',
				describe:'用照片與文字，分享你的每一天！',
				type:'colony'
			}]
        };
    },
    methods: {
        show(){
            this.visible = true;
        },
		close(){
			this.visible = false;
		},
		pushFn(type){
			this.visible = false;
			const uid = uni.getStorageSync('userId');
			const user_info = uni.getStorageSync('userInfo');
			if( !uid ){
				uni.reLaunch({
					url: '/pages/index/login'
				})
				return;
			}
			if( type == 'expert' ){
				if( user_info.is_first == 0 ){
					uni.navigateTo({
						url:'/pages/home/guide'
					})
				} else {
					uni.navigateTo({
						url:'/pages/demand/publish?type='+type
					})
				}
			} else {
				if( user_info.verification == 0 ){
					uni.navigateTo({
						url:'/pages/my/auth'
					})
				} else {
					uni.navigateTo({
						url:'/pages/demand/publish?type='+type
					})
				}
			}
		}
    }
};
</script>

<style lang="scss" scoped>
.popup-push{
	padding: 46rpx 40rpx 42rpx;
	
	.popup-push-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.site{
			width: 180rpx;
		}
		.title{
			font-size: 30rpx;
			font-weight: 600;
		}
		.btn{
			display: flex;
			justify-content: flex-end;
		}
	}
	.popup-push-body{
		margin-top: 24rpx;
		
		.popup-push-list{
			
			box-sizing: border-box;
			
			.popup-push-item{
				margin-top: 32rpx;
				padding: 20rpx 48rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background: #F6F8FA;
				border-radius: 120rpx;
				
				.popup-push-icon{
					
				}
				
				.popup-push-text{
					margin-left: 32rpx;
					width: 400rpx;
					
					.title{
						font-size:28rpx;
						font-weight: 600;
					}
					.describe{
						color:#6A707C;
						font-size:24rpx;
					}
				}
				
				.popup-push-arrow{
					margin-left: 32rpx;
				}
				
			}
		}
	}
}

</style>
